@charset="UTF-8";
@media screen, projection, tv{
	body{
		background-color:black;
		color:white;
		font-family:monospace;
	}
	h1, canvas{
		font-family:monospace; 
		font-size:100px; 
		position:absolute;
	}
	h1.finalScore{
		position:absolute;
		display:block;
		left:175px;
		top:100px;
		font-size:200px;
	}
	#playButton{
		position:absolute;
		top:180px;
		left:300px;
		font-size:15px;
	}	
	#pauseOverlay:after{
		position:absolute;
		top:100px;
		left:200px;
		content: "Paused";
	}
	#pauseOverlay{
		margin: 0;
		display:block;
		position:absolute;
		top:-0px;
		left:-0px;
		width:100%;
		background-color:rgba(0, 0, 0, 0.5);
		opacity:0;
	}
	#instructionButton{
		position:absolute;
		top:215px;
		left:276px;
		font-size:15px;
	}
	input:hover{
		background-color:rgba(255, 255, 255, 0.2);
	}
	#menu{
		background-color:rgba(0,0,0,0.5);
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		display:block;
	}
	#game{
		opacity:0;
	}
	#difDiv{
		position:absolute;
		top:100px;
		left:425px;
		font-size:15px;
	}
	#replay{
		z-index:9999999999999;
		position:absolute;
		left: 350px;
		top: 210px;
		padding: 4px;
	}
	.difButton{
		position:absolute;
		top:0px;
		left:45px;
	}
	input{
		border-radius: 4px;
		-o-border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		background: transparent;
		border: white 2px solid;
		color: white;
	}
	.difLabel{
		position:absolute;
		top:0px;
		left:75px;
	}
	h2.finalScore{
		position:absolute;
		display:block;
		left:175px;
		top:305px;
		font-size:100px;
	}
	div#finalScore{
		position:absolute;
		top: 0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0,0,0, 0.5);
		opacity:0;
	}
	h1#score{ 
		position:absolute;
		left: 600px;
		top: 50px; 
	}
	h2#time{
		position:absolute;
		left: 600px;
		top: 175px;
		font-size:75px;
	}
	#canvas{
		position:absolute;
		top:30px;
		left:180px;
		-webkit-box-shadow:0 0 20px white;
		-moz-box-shadow:0 0 20px white;
		box-shadow:0 0 20px white;
	}
	*{
		-webkit-transition: left 1s ease-in-out, opacity 1s ease-in-out;
		-moz-transition: left 1s ease-in-out, opacity 1s ease-in-out;
		-o-transition: left 1s ease-in-out, opacity 1s ease-in-out;
		transition: left 1s ease-in-out, opacity 1s ease-in-out;
	}
	::selection {
		background: rgba(0,0,0,0); /* Safari */
	}
	::-moz-selection {
	    background: rgba(0,0,0,0); /* Firefox */
	}
	::-webkit-selection {
	    background: rgba(0,0,0,0); /* chrome */
	}
	::-o-selection {
	    background: rgba(0,0,0,0); /* opera? */
	}
	#instructions{
		position: absolute;
		left: 400px;
		top:450px;
		-webkit-transition: left 0s linear;
		-moz-transition: left 0s linear;
		-o-transition: left 0s linear;
		transition: left 0s linear;
	}
}
@media print{
	body:before{
		content:"You tried to print this? Stop killing trees!";
	}
	#body{
		display: none;
	}
}
@media speech, aural{
	body:before{
		content:"Hmm... it is rather hard to pronounce a pong game. I wont try.";
	}
	#body{
		display: none;
	}
}
@media braille, embossed{
	body{
		before:"Hmm... it is rather hard to make a pong game into braille. I wont try.";
	}
	#body{
		display: none;
	}
}
@media tty, handheld{
	body:before{
		content:"Your screen is too nooby to show a pong game.";
	}
	#body{
		display: none;
	}
}
